Developing Applications for Windows Phone 7 : Controls

11/27/2010 11:33:44 AM

The drawing grammar you’ve seen is used primarily to paint the surface of the Windows Phone 7. The next level down is controls. Controls are for interaction with the user. All controls have the concept of control focus, tab order and enabling/disabling. Controls are no different from any other XAML elements you have seen so far. For example, the TextBox control can be seen here:

<Grid>
  <TextBox Text="Hello World"
           Height="75"/>
</Grid>

This TextBox will show up like the drawing elements but will support the user interacting with the control through touch (as evidenced by the cursor shown in Figure 1).

Figure 1. TextBox (TextBox.bmp)

Out of the box Silverlight for the Windows Phone 7 supports these controls:

Button
CheckBox
HyperlinkButton
InkPresenter
ListBox
PasswordBox
ProgressBar
RadioButton
Slider
TextBox

These controls represent the main interaction with users. While this list is somewhat abbreviated, these controls are specialized to support the touch interface of the Windows Phone 7. Most of these controls are built larger than you might imagine (and with large margins) to accommodate touching them.

Silverlight Controls

If you are coming to this book with existing Silverlight knowledge you may be surprised by the abbreviated nature of the list of controls to be supported. While many of the controls in Silverlight 3 (and the Silverlight Toolkit for Silverlight 3) will work with the Windows Phone 7, Microsoft has not re-designed these controls to be easy to use with the phone. If you have a need for these other controls, they are not forbidden, it is just up to you to change the way they look to conform to the phone.

The controls they have picked have specific integration with the touch interface of the phone. When you start to look at other controls (e.g. ToolTip, Calendar, etc.), finding the right functionality for these controls in a touch environment is not simple. Therefore you may want to stick with the built-in controls until you have a good feel for the way that touch affects the way users interact with the controls.

Most of the controls in Silverlight are broken up into one of three categories. These categories help you understand how they are expected to work. These categories include Simple Controls, Content Controls and List Controls.

Simple Controls

The Simple Controls include the TextBox, PasswordBox, Slider and ProgressBar. These controls have a simple API in that they do a specific job and look a certain way. They are, in a word, simple:

<StackPanel>
  <TextBox Text="Hello" />
  <PasswordBox PasswordChar="*" />
  <Slider Value="5" />
  <ProgressBar IsIndeterminate="True" />
</StackPanel>

Content Controls

There is another class of controls that specifically allow you to contain arbitrary XAML inside them. The most common of these is the Button control. For example, to simply show a text message in a Button you could just set the Content property like so:

<StackPanel>
  <Button Content="Click Me" />
</StackPanel>

You can see that the content of the control (“Click Me”) is now inside the Button as seen in Figure 2.

Figure 2. Simple Button with Content (SimpleButton.bmp)

But the content can take arbitrary XAML content as well:

<StackPanel>
  <Button>
    <Button.Content>
      <StackPanel>
        <Image Source="headshot.png"
                Width="100"/>
        <TextBlock>Hello</TextBlock>
      </StackPanel>
    </Button.Content>
  </Button>
</StackPanel>

This results in a Button with this XAML inside the button as seen in Figure 3.

Figure 3. Button with XAML Content (ContentButton.bmp)

Notice that the content is inside the button not replacing the XAML that makes up the button. Setting the Content property allows you to specify what is inside the button (or in most content controls, what is inside some part of the control. A content control is any control that derives from the ContentControl class. These include Button, CheckBox, RadioButton and HyperlinkButton.

List Controls

The last type of control we will talk about is list controls. In the supported list of controls only the ListBox is a supported list control but as you use other control types you will run into other list controls. List controls support showing any arbitrary list of items. It does this by using a property called ItemsSource. This property takes any collection that supports IEnumerable or IList. This means any type of collection (from simple arrays to complex generic collections) all is supported by the list controls. The ListBox defined in XAML is pretty standard:

<StackPanel>
  <ListBox x:Name="theList" />
</StackPanel>

The real trick is when you set some collection to the ItemsSource property:

public partial class MainPage : PhoneApplicationPage
{
  // Constructor
  public MainPage()
  {
    InitializeComponent();

    theList.ItemsSource = new string[] { "One", "Two", "Three" };
  }
}

Setting the ItemsSource will show the collection (and allow individual items to be selected (as seen in Figure 4).

Figure 4. ListBox (ListBox.bmp)

Other list controls will follow this same interface (of setting the collection to an ItemsSource) to set the collection. Using these simple control sets you should be able to create great experiences for your users.